<template>
  <div
    class="mac-os"
    @mousedown.self="boot"
    @contextmenu.prevent="onContextShow()"
  >
    <transition name="fade">
      <Bg v-if="isBg"></Bg>
    </transition>
    <transition name="fade">
      <Loading v-if="isLoading" @loaded="loaded"></Loading>
    </transition>
    <transition name="fade">
      <Login v-if="isLogin" @logined="logined"></Login>
    </transition>
    <transition name="fade">
      <DeskTop
        v-if="isDeskTop"
        @lockScreen="lockScreen"
        @shutdown="shutdown"
        @logout="logout"
      ></DeskTop>
    </transition>
  </div>
</template>

<style scoped lang="scss">
.mac-os {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>
<script>
import { defineAsyncComponent } from "vue";
export default {
  name: "MacOS",
  components: {
    Bg: defineAsyncComponent(() => import("@/components/Bg")),
    Loading: defineAsyncComponent(() => import("@/components/Loading")),
    Login: defineAsyncComponent(() => import("@/components/Login")),
    DeskTop: defineAsyncComponent(() => import("@/components/DeskTop")),
  },
  data() {
    return {
      isBg: false,
      isLoading: false,
      isLogin: false,
      isDeskTop: false,
    };
  },
  created() {
    this.loaded();
  },
  methods: {
    onContextShow() {
      console.log("onContextShow");
    },
    boot() {
      this.isLoading = true;
    },
    loaded() {
      this.isLoading = false;
      this.isBg = true;
      this.isLogin = true;
    },
    logined() {
      console.log("login success");
      this.isLogin = false;
      this.isDeskTop = true;
    },
    lockScreen() {
      this.isLogin = true;
    },
    logout() {
      localStorage.removeItem("access_token");
      localStorage.removeItem("user");
      this.$store.commit("logout");
      this.isDeskTop = false;
      this.isLogin = true;
    },
    shutdown() {
      localStorage.removeItem("access_token");
      localStorage.removeItem("user");
      this.isDeskTop = false;
      this.isLogin = false;
      this.isLoading = false;
      this.isBg = false;
    },
  },
};
</script>